<template>
  <div class="dashboard-container">
    <!-- 顶部卡片统计 -->
    <el-row :gutter="20" class="panel-group">
      <el-col :span="6" class="card-panel">
        <el-card shadow="hover">
          <div class="card-header">
            <span>总访问次数</span>
            <el-tag type="success">+20%</el-tag>
          </div>
          <div class="card-body">
            <div class="card-value">9120</div>
            <div class="card-icon">
              <el-icon><View /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6" class="card-panel">
        <el-card shadow="hover">
          <div class="card-header">
            <span>在线访客数</span>
            <el-tag type="primary">+10%</el-tag>
          </div>
          <div class="card-body">
            <div class="card-value">182</div>
            <div class="card-icon">
              <el-icon><User /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6" class="card-panel">
        <el-card shadow="hover">
          <div class="card-header">
            <span>点击量</span>
            <el-tag type="warning">-12%</el-tag>
          </div>
          <div class="card-body">
            <div class="card-value">9520</div>
            <div class="card-icon">
              <el-icon><Pointer /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6" class="card-panel">
        <el-card shadow="hover">
          <div class="card-header">
            <span>新用户</span>
            <el-tag type="success">+30%</el-tag>
          </div>
          <div class="card-body">
            <div class="card-value">156</div>
            <div class="card-icon">
              <el-icon><UserFilled /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header-with-tag">
              <span>用户概述</span>
              <el-tag type="success">比上周 +23%</el-tag>
            </div>
          </template>
          <div class="user-overview">
            <div class="stat-item">
              <div class="stat-title">总用户量</div>
              <div class="stat-value">32k</div>
            </div>
            <div class="stat-item">
              <div class="stat-title">总访问量</div>
              <div class="stat-value">128k</div>
            </div>
            <div class="stat-item">
              <div class="stat-title">日访问量</div>
              <div class="stat-value">1.2k</div>
            </div>
            <div class="stat-item">
              <div class="stat-title">周同比</div>
              <div class="stat-value">+5%</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="16">
        <el-card class="todo-card">
          <template #header>
            <div class="card-header-with-tag">
              <span>待办事项</span>
              <el-button type="primary" text>查看更多</el-button>
            </div>
          </template>
          <div class="todo-list">
            <el-table :data="todoList" style="width: 100%">
              <el-table-column prop="title" label="标题" />
              <el-table-column prop="time" label="时间" width="180" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag :type="row.status === '已完成' ? 'success' : 'warning'">
                    {{ row.status }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { View, User, Pointer, UserFilled } from '@element-plus/icons-vue'

const todoList = ref([
  {
    title: '完成用户管理模块',
    time: '2025-07-15 14:00',
    status: '进行中'
  },
  {
    title: '系统安全更新',
    time: '2025-07-15 16:00',
    status: '待处理'
  },
  {
    title: '数据库优化',
    time: '2025-07-14 18:00',
    status: '已完成'
  }
])
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.panel-group {
  margin-bottom: 20px;
}

.card-panel {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}

.card-header-with-tag {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-body {
  position: relative;
  height: 60px;
}

.card-value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.card-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  color: #409EFF;
  opacity: 0.6;
}

.user-overview {
  padding: 10px 0;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.stat-item:last-child {
  border-bottom: none;
}

.stat-title {
  color: #666;
  font-size: 14px;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.todo-card {
  margin-bottom: 20px;
}

.todo-list {
  :deep(.el-table) {
    --el-table-border: none;
  }
}
</style>
